import './index.scss'
import { useRef, useEffect, useState } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { songingFlag, songflag, setPlayType } from '../../store/actions'
import { Slider, Toast } from 'antd-mobile';
function Musicing (props) {
    const open = useSelector(state => state.reducer.songingflag)
    const music = useSelector(state => state.reducer.playSong)
    const openFlag = useSelector(state => state.reducer.songFlag)
    const comSlider = useRef(null)
    const dispatch = useDispatch()
    const close = () => {
        dispatch(songingFlag(false))
    } 
    // 修改播放状态
    const playTypeNum = useSelector(state => state.reducer.songType)
    const playType = () => {
        const num = playTypeNum + 1 >4 ? 1 : playTypeNum + 1
        Toast.info(TypeClass(num).title, 1) // 提示播放模式
        dispatch(setPlayType(num))
    }
    const TypeClass= (data) => {
         // 1 列表循环 2 /单曲循环 3顺序播放 4随机播放
         let num = ''
         // eslint-disable-next-line default-case
         switch(data ? data : playTypeNum) {
            case 1:
            num = { title: '列表循环', icon: 'icon-liebiaoxunhuan'}
            break;
            case 2:
            num = { title: '单曲循环', icon: 'icon-danquxunhuan'}
            break;
            case 3:
            num = { title: '顺序播放', icon: 'icon-shunxubofang'}
            break;
            case 4:
            num = { title: '随机播放', icon: 'icon-suijibofang'}
            break;
         }
         return num
    }
    // 暂停
    const openClose = () => {
        dispatch(songflag(!openFlag))
    }
    const musicLyc = useRef(null)
    const musicLycUl = useRef(null)
    const [lycStyle, setLycStyle] = useState({})
    const [lycIndex, setLycIndex] = useState(0)
    // 监听播放时间，滚动歌词
    useEffect(() => {
        if(music && musicLyc) {
            const time = props.currentTime
            music.lrc.map((item, index) => {
                if(index !== music.lrc.length - 1 && time > item.time && time < music.lrc[index + 1].time) {
                    setLycIndex(index)
                    const move = index - 1 ? index - 1 : 0
                    setLycStyle({transform: `translateY(-${25 * move}px)`, transition: 'all 1s'})
                }
            })
        }
    }, [props.currentTime])
    // 下一首歌词复位
    useEffect(()=> {
        setLycIndex(0)
        setLycStyle({transform: `translateY(0px)`, transition: 'all 0s'})
    }, [music])
    return (
        <div  className={`components-Musicing  ${open ? 'components-Musicing-X' : ''}`}>
            <div className="components-Musicing-bg" style={{backgroundImage:`url(${music ? music.al.picUrl : ''})`}}></div>
            <div className="detail-head ali-c">
                <div onClick={close} className="iconfont icon-zuogengduofanhuiback"></div>
                <div className="flex flexv">
                    <span>{music && music.name}</span>
                    <span>
                        {music && music.ar.map((item, index) => {
                            return `${item.name}${index === music.ar.length - 1 ? '' : '/'}`
                        })}
                    </span>
                </div>
            </div>
            <div className="components-Musicing-main ali-c jus-c">
                <div className={`components-Musicing-main-needle ${openFlag ? 'open-needle' : ''}`}> </div>
                <div  onClick={openClose} className={`components-Musicing-main-disc ${openFlag ? '' : 'stop-animation'}`}>
                    <div className="components-Musicing-main-disc-bg"></div>
                    <img src={music && music.al.picUrl}  alt=""/>
                </div>
             <div className="components-Musicing-playlrc">
                <ul ref={musicLycUl} style={lycStyle} className="components-Musicing-playlrc-ul">
                  {music && music.lrc.map((item,index) => {
                      return (<li ref={musicLyc} className={`tc components-Musicing-playlrc-li ${index === lycIndex ? 'lycIndex' : ''}`} key={index}>{item.lyc}</li>)
                  })}
                </ul>
             </div>
            </div>
            <div className="components-Musicing-play">
                <div className="ali-c components-Musicing-play-Slider">
                <span>{props.currentTime || '00.00.00' }</span>
                <Slider
                    ref={comSlider}
                    style={{ marginLeft: 10, marginRight: 10,  }}
                    handleStyle={{ borderColor: '#e5473c', bordeRadius: '50%'}}
                    trackStyle={{backgroundColor:'#e5473c', height:'2px'}}
                    railStyle={{height:'2px'}}
                    value={props.value}
                    defaultValue={0}
                    min={0}
                    max={100}
                    onAfterChange={(i) => {props.onAfterChange(i)}}
                    onChange={(i) => {props.onChange(i)}}
                />
                <span>{props.duration || '00.00.00'}</span>
                </div>
                <div className="ali-c jus-a iconfont-Manipulator">
                    <div onClick={playType} className={`iconfont ${TypeClass().icon} playlis-type`}></div>
                    <div className="iconfont-Manipulator-play ali-c">
                        <span onClick={() => props.nextSong(-1)} className="iconfont icon-shangyiqu last"></span>
                        <span onClick={openClose} className={`iconfont ${openFlag ? 'icon-bofangzhong' : 'icon-zanting'} play`}></span>
                        <span onClick={() => props.nextSong(1)} className="iconfont icon-xiayiqu next"></span>
                    </div>
                    <div onClick={props.changeplaylistOpen} className="iconfont icon-bofangduilie playlist"></div>
                </div>
            </div>
        </div>
    )
}

export default Musicing